<template>
 	<view class="confirm-modal">
		<backheader :title="title" :closecardflag="closecardflag" :checkflag="checkflag"></backheader>
		<view class="mainMenu">
			<view class="mmitem" :class="{mmactive: mmactiveflag === 1}" @click="changeMm(1)">人员确认</view>
			<view class="mmitem" :class="{mmactive: mmactiveflag === 2}" @click="changeMm(2)">危险点确认</view>
			<view class="mmitem" :class="{mmactive: mmactiveflag === 3}" @click="changeMm(3)">设备确认</view>
		</view>
		<view class="content ">
			<operation-userconfirm v-if='mmactiveflag === 1' :data="dataInfo" />
			<dangerous-point v-if='mmactiveflag === 2'  :otId="otId"/>
			<equipment-confirm v-if='mmactiveflag === 3' :data="dataInfo" />
		</view>
		<button  type="primary" class="botton-btn-st" @click="execute" v-if="mmactiveflag !=3" >下一步</button>
	</view>
 </template>
 
 <script>
	import backheader from "@/components/backHeader/backHeader.vue";
	import DangerousPoint from "./DangerousPoint.vue";
	import EquipmentConfirm from "./EquipmentConfirm.vue";
	import OperationUserconfirm from "./OperationUserConfirm.vue";
	import {
		getTicketDetail
	} from '@/api/operationPicket.js'
	export default {
		data() {
			return {
				closecardflag:true,
				title:"操作票",
				checkflag:false,
				mmactiveflag:1,
				otId:'',
				dataInfo:{}
			}
		},
		components:{
			backheader,
			DangerousPoint,
			EquipmentConfirm,
			OperationUserconfirm
		},
		onLoad(option) {
			this.otId = option.id
			this.changeMm(1)
		},
		mounted() {
			this.queryTicketDetail()
		},
		methods: {
			/**
			 * 操作票基本信息
			 **/
			queryTicketDetail() {
				getTicketDetail({
					otId: this.otId
				}).then(res => {
					this.dataInfo = res.result.result
				})
			},
			changeMm(index){
				if(index==1){
					this.mmactiveflag = 1
				}else if(index == 2){
					this.mmactiveflag = 2
				}else if(index == 3){
					this.mmactiveflag = 3
				}
			},
			execute(){
				this.mmactiveflag++
			}
		}
	}
 </script>
 
<style lang="scss">
	.botton-btn-st {
		position: fixed;
		bottom: 20upx;
		width: 90%;
		left: 5%;
	}
	.confirm-modal{
		background-color: #f6fafa;
		height: 100vh;
		.mainMenu{
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			display: flex;
			background-color: #fff;
		}
		.mmitem{
			flex: 1;
			text-align: center;
			font-size: 28upx;
			color: #333333;
		}
		
		.conright{
			text-align: right;
			width: 60%;
			direction: right;
			padding-right: 24upx;
			color: #666666;
			font-size: 28upx;
		}
		.mmactive{
			border-bottom: solid 4upx #1E91E6;
		}
		
		.content{
			padding: 0 3%;
			margin-top: 20upx;
		}
	}
	
 </style>